	<template>
	<view>
		<u-popup :show="show" mode="center" :customStyle="{width: '500rpx', padding: '30rpx'}" round="20rpx"
			:safeAreaInsetBottom="false" @touchmove.stop.prevent="moveHandle">
			<view class="content">
				<view class="title">您上传的图片无法识别有效信息</view>
				<view class="desc">
					<view>请重新拍摄上传图片，资质图片需要</view>
					<view>银行卡号清晰可见</view>
				</view>

				<view class="fail-box">
					<view class="u-flex-content-center">
						<u--image :showLoading="true" :src="src" width="360rpx" height="270rpx" />
					</view>
					<view class="u-flex-content-center u-m-t-10">
						<view class="close-box">
							<u-icon name="close" color="#fff" size="10" />
						</view>
						<text class="u-m-l-10">您上传的图片</text>
					</view>
				</view>

				<view class="demo-box">
					<view class="u-flex-content-center">
						<u-album :urls="demoUrlList"></u-album>
					</view>
					<view class="u-flex-content-center u-m-t-10">
						<view class="close-box">
							<u-icon name="checkmark" color="#fff" size="10" />
						</view>
						<text class="u-m-l-10">正确示例</text>
					</view>
				</view>

				<view class="tips u-m-t-50">tips：上传虚假资质照片将无法通过审核</view>

				<view class="u-m-t-20 u-flex u-row-between">
					<u-button text="确认无误" :customStyle="{width: '45%', height: '88rpx', borderRadius: '44rpx'}"
						@click="confirm()" />
					<u-button type="primary" text="重新上传"
						:customStyle="{width: '45%', height: '88rpx', borderRadius: '44rpx', color: '#fff'}"
						@click="uploadAgain()" />
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: {

		},
		data() {
			return {
				baseImgURL: this.$configPath.imgURL,
				src: '',
				demoUrlList: [
					this.$configPath.imgURL + 'fixed/bankCardADemo.jpg'
				],
				nextStepBtnCustomStyle: {
					width: '488rpx',
					height: '88rpx',
					borderRadius: '44rpx',
					color: '#fff',
				},
				show: false,
			};
		},
		created() {

		},
		methods: {
			showPopup(inUrl) {
				this.src = getApp().formatImageSuffix(inUrl);
				this.show = true;
			},

			unShowPopup() {
				this.show = false;
			},

			// 确认无误
			confirm() {
				this.unShowPopup();
			},

			// 重新上传
			uploadAgain() {
				this.unShowPopup();
				this.$parent.bankCardAUploadAgain();
			},
			// 防止遮罩层滚动穿透
			moveHandle() {},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		font-size: $f-base;

		.tips {
			color: rgba(0, 0, 0, 0.8);
			font-size: $f-sm;
			text-align: center;
			font-weight: bold;
		}

		.demo-box {
			margin-top: 30rpx;
			text-align: center;

			.close-box {
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
				background-color: rgb(0, 191, 127);
				display: flex;
				justify-content: center;
				align-items: center;

				.fail-img {
					margin: 0 auto;
				}

			}
		}

		.fail-box {
			margin-top: 30rpx;
			text-align: center;

			.close-box {
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
				background-color: red;
				display: flex;
				justify-content: center;
				align-items: center;

				.fail-img {
					margin: 0 auto;
				}

			}
		}

		.desc {
			margin-top: 50rpx;
			text-align: center;

			view:nth-of-type(1) {
				color: rgba(0, 0, 0, 0.8);
			}

			view:nth-of-type(2) {
				color: red;
			}
		}

		.title {
			font-weight: bold;
			text-align: center;
		}
	}
</style>